<template>
    <van-nav-bar title="学情报告" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model:active="active">
        <van-tab  title="全科">
            <Subject :list="list" :num="num" />
        </van-tab>
        <van-tab title="语文">
            <Chinese :list="list" />
        </van-tab>
        <van-tab title="数学">
           <Maths :list="list" />
        </van-tab>
        <van-tab title="英语">
            <English :list="list" />
        </van-tab>
        <van-tab title="物理">
            <Physics :list="list" />
        </van-tab>
        <van-tab title="化学">
            <Chemistry :list="list" />
        </van-tab>
        <van-tab title="生物">
            <Organism :list="list" />
        </van-tab>
        <van-tab title="政治">
            <Politics :list="list" />
        </van-tab>
        <van-tab title="历史">
            <History :list="list" />
        </van-tab>
        <van-tab title="地理">
            <Geography :list="list" />
        </van-tab>
    </van-tabs>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Subject from '@/components/subject.vue'
import Chinese from '@/components/chinese.vue'
import Maths from '@/components/maths.vue'
import English from '@/components/english.vue'
import Physics from '@/components/physics.vue'
import Chemistry from '@/components/chemistry.vue'
import Organism from '@/components/organism.vue'
import Politics from '@/components/politics.vue'
import History from '@/components/history.vue'
import Geography from '@/components/geography.vue'
const onClickLeft = () => history.back();
import { getStudent } from '@/api/student'
import type { Ref } from 'vue'

interface IStudent {
    name: string,
    id: number,
    class: string,
    account: string,
    password: string,
    phone: string,
    grade: object
}

const list: Ref<IStudent[]> = ref([])
let num  = 0

onMounted(async () => {
    const { data } = await getStudent()
    list.value = data[0].grade   
    data[0].grade.forEach (item => {
        num += item.score
    }) 
})

</script>

